<template>
  <div class="login-container">
    <!-- 顶部工具栏 -->
    <!-- <div class="top-bar">
      <el-switch v-model="isDark" inline-prompt active-icon="Moon" inactive-icon="Sunny" @change="toggleTheme" />
      <lang-select class="ml-2 cursor-pointer" />
    </div> -->
    <!-- 登录表单 -->
    <el-card class="login-card">
      <div class="text-center relative">
        <h2>护士工作量统计</h2>
      </div>

      <el-form ref="loginFormRef" :model="loginData" :rules="loginRules" class="login-form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <div class="input-wrapper">
            <i-ep-user class="mx-2" />
            <el-input ref="username" v-model="loginData.username" placeholder="登录名" name="username" size="large" />
          </div>
        </el-form-item>

        <!-- 密码 -->
        <el-tooltip :visible="isCapslock" content="cont" placement="right">
          <el-form-item prop="password">
            <div class="input-wrapper">
              <i-ep-lock class="mx-2" />
              <el-input v-model="loginData.password" placeholder="密码" type="password" name="password"
                @keyup="checkCapslock" @keyup.enter="handleLoginSubmit" size="large" show-password />
            </div>
          </el-form-item>
        </el-tooltip>
        <!-- 登录按钮 -->
        <el-button :loading="loading" type="primary" size="large" class="w-full" @click.prevent="handleLoginSubmit">
          登录</el-button>
      </el-form>

    </el-card>


  </div>
</template>

<script setup>
// 外部库和依赖
import { useRoute } from "vue-router";
import router from "@/router";
import { reactive, toRefs, ref, getCurrentInstance, watch, onMounted, toRaw, watchEffect, computed } from "vue";
//Api
import { PLogin } from "../util/request"

import { useUserStore } from "@/store/user.js"
const route = useRoute();
// 按钮 loading 状态
const loading = ref(false);
// 是否大写锁定
const isCapslock = ref(false);

const loginData = ref({
  username: "",
  password: ""
});

const UserStore = useUserStore();

const loginFormRef = ref();

const loginRules = computed(() => {
  return {
    username: [
      {
        required: true,
        trigger: "blur",
        message: "请输入登录名",
      },
    ],
    password: [
      {
        required: true,
        trigger: "blur",
        message: "请输入密码",
      }
    ]
  };
});
//获取用户信息

//提交登录
function handleLoginSubmit() {
  console.log('点击登录');
  loginFormRef.value?.validate((valid) => {
    if (valid) {
      loading.value = true;
      PLogin(loginData.value)
        .then((res) => {
          UserStore.setData(res)
          localStorage.setItem('CurUser', res.username);
          const { path, queryParams } = parseRedirect();
          console.log('页面跳转' + path + ":" + queryParams);
          router.push({ path: path, query: queryParams });
          //router.push({ path: '/nursework' });
        })
        .catch(() => {
          console.log('出现错误');
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}

/** 解析 redirect 字符串 为 path 和  queryParams */
function parseRedirect() {
  const query = route.query;
  console.log(query)
  const redirect = query.redirect ?? "/";

  const url = new URL(redirect, window.location.origin);
  const path = url.pathname;
  const queryParams = {};

  url.searchParams.forEach((value, key) => {
    queryParams[key] = value;
  });

  return { path, queryParams };
}

onMounted(() => {

  parseRedirect()

})

</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: url("@/assets/images/login-background-light.jpg") no-repeat center right;

  .top-bar {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 10px;
  }

  .w-full {

    margin: 0 auto;
  }

  .login-card {
    width: 400px;
    background: transparent;
    border: none;
    border-radius: 4%;

    @media (width <=640px) {
      width: 340px;
    }

    .input-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .captcha-image {
      height: 48px;
      cursor: pointer;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
  }

  .icp-info {
    position: absolute;
    bottom: 4px;
    font-size: 12px;
    text-align: center;
  }

  .el-form-item {
    background: var(--el-input-bg-color);
    border: 1px solid var(--el-border-color);
    border-radius: 5px;
  }

  .el-input {
    .el-input__wrapper {
      padding: 0;
      background-color: transparent;
      box-shadow: none;

      &.is-focus,
      &:hover {
        box-shadow: none !important;
      }

      input:-webkit-autofill {
        /* 通过延时渲染背景色变相去除背景颜色 */
        transition: background-color 1000s ease-in-out 0s;
      }
    }
  }
}

html.dark .login-container {
  background: url("@/assets/images/login-background-dark.jpg") no-repeat center right;
}
</style>
